<template>
  <div>
    <InfoTable ref="InfoTable" location="workings/search/bigkindAndGroup" :param="`bigkind=${this.bigkind}`" :filterFields="filterFields">
      <template slot="button-operation">
        <div></div>
      </template>
      <template slot="table-operation" slot-scope="row">
        <b-btn variant="outline-primary" style="margin-right:8px;padding:6px;font-size:0.7rem" @click="onNetWorkModalShow(row)">查询信息</b-btn>
      </template>
      <template slot="table-bigkind" slot-scope="row">
        {{row.data.item.bigkind | bigkind}}
      </template>
    </InfoTable>

    <!-- 用来查询此网元下的网元能力 -->
    <b-modal ref="NetWorkModal" ok-only title="网元" size="lg">
      <b-container fluid>
        <InfoTable ref="NetWorkTable" location="workings/search/work" href="network" :param="`work=${currendRecord.work}`" :filterFields="filterFields">
          <template slot="button-operation">
            <div></div>
          </template>
          <template slot="table-operation" slot-scope="row">
            <b-btn variant="outline-primary" style="margin-right:8px;padding:6px;font-size:0.7rem" @click="netWorkModalInfo(row.data)">查询信息</b-btn>
          </template>
          <template slot="table-bigkind" slot-scope="row">
            {{row.data.item.bigkind | bigkind}}
          </template>
        </InfoTable>
      </b-container>
      <div slot="modal-footer" class="w-100">
        <b-btn size="sm" class="float-right" variant="primary" @click="$refs.NetWorkModal.hide()">
          返回
        </b-btn>
      </div>
    </b-modal>
    <!-- 用来查看网元能力的详细信息 -->
    <b-modal ref="NetWorkInfoModal" ok-only title="网元能力" size="lg">
      <NetWorkInfoModal v-bind:item="netWorkInfoModalItem"></NetWorkInfoModal>
      <div slot="modal-footer" class="w-100">
        <b-btn size="sm" class="float-right" variant="primary" @click="$refs.NetWorkInfoModal.hide(),$refs.NetWorkModal.show()">
          返回
        </b-btn>
      </div>
    </b-modal>
  </div>
</template>

<script>
import InfoModal from "components/InfoModal";
import InfoTable from "components/InfoTable";
import NetWorkInfoModal from "components/NetWorkInfoModal.vue";
import {
  baseURL,
  get,
  save,
  associate,
  getAndAssociate,
  remove
} from "src/service/api";
export default {
  name: "Category",
  props: ["query"],
  components: {
    InfoTable,
    InfoModal,
    NetWorkInfoModal
  },
  filters: {
    bigkind: function(value) {
      switch (value) {
        case 1:
          return "传输";
          break;
        case 2:
          return "交换";
          break;
        case 3:
          return "数据";
          break;
        case 4:
          return "其他";
          break;
        case 0:
          return "未归档";
          break;
      }
    }
  },
  data() {
    return {
      bigkind: null,
      netWorkInfoModalItem: {
        description: "",
        id: "",
        in: [],
        name: "",
        out: []
      },
      currendRecord: {},
      netWorkModal: {},
      filterFields: ["bigkind"]
    };
  },
  created() {
    switch (this.query) {
      case "transmission":
        this.bigkind = 1;
        break;
      case "exchange":
        this.bigkind = 2;
        break;
      case "data":
        this.bigkind = 3;
        break;
      case "other":
        this.bigkind = 4;
        break;
      default:
        this.bigkind = 0;
        break;
    }
  },
  methods: {
    netWorkModalInfo(entry) {
      let self = this;
      get("wynl/list/" + entry.item.code)
        .then(response => {
          if (response.status == "200") {
            console.log("资源获取成功");
            self.netWorkInfoModalItem = response.data;
          }
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });
      self.$refs.NetWorkInfoModal.show();
    },
    onNetWorkModalShow(row) {
      this.currendRecord = row.data.item;
      this.$refs.NetWorkModal.show();
    },
    onNetWorkArchiveModalShow(row) {
      this.currendRecord = row.data.item;
      this.netWorkArchiveModal.selected = this.currendRecord.bigkind;
      this.$refs.NetWorkArchiveModal.show();
    }
  }
};
</script>
<style lang="scss">
.control-group {
  margin-bottom: 10px;
}
.pull-left {
  float: left;
}
.help-inline {
  display: inline-block;
  *display: inline;
  padding-left: 5px;
  vertical-align: middle;
  *zoom: 1;
}
.help-block,
.help-inline {
  color: #595959;
}
.table th,
.table td {
  vertical-align: middle;
}
.custom-select {
  float: left;
}
</style>
